import { memo } from 'react';
import { MinerCount } from '@/utils/monitor/formatMinerCount';
import styles from '@/layout/layout.module.less';

const MinerCountStrip = memo(
  (props: {
    minerCount: MinerCount;
    miner_num: number;
    containerStyle?: Record<string, string>;
  }) => {
    return (
      <div
        className={`flex ${styles.minerCountStrip}`}
        style={props.containerStyle}
      >
        <div
          className="normal-count-bg"
          style={{
            width:
              (props.minerCount.normal_count / props.miner_num) * 100 + '%',
          }}
        ></div>

        <div
          className="warning-count-bg"
          style={{
            width:
              (props.minerCount.warning_count / props.miner_num) * 100 + '%',
          }}
        ></div>

        <div
          className="abnormal-count-bg"
          style={{
            width:
              (props.minerCount.abnormal_count / props.miner_num) * 100 + '%',
          }}
        ></div>
        <div
          className="downtime-count-bg"
          style={{
            width:
              (props.minerCount.downtime_count / props.miner_num) * 100 + '%',
          }}
        ></div>
        <div
          className="offline-count-bg"
          style={{
            width:
              (props.minerCount.offline_count / props.miner_num) * 100 + '%',
          }}
        ></div>
      </div>
    );
  },
);
export default MinerCountStrip;
